<template>
  <div>
     <el-card v-loading.lock="loadingMask">
    <el-table
     :data="currentUserInfo"
    >
      <el-table-column
          prop="id"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
          <template slot-scope="{row}">
          {{usersex(row.sex)}}
        </template>
      </el-table-column>
      <el-table-column
          prop="sex"
          label="评论条数">
          <template slot-scope="{row}">
          {{usercomments(row.comments)}}
        </template>
      </el-table-column>
      <el-table-column
          prop="useable"
          label="账户状态">
          <template slot-scope="{row}">
          {{userstatus(row.useable)}}
        </template>
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="生日">
      </el-table-column>
      <el-table-column
          label="操作"
          width='300'>
          <template slot-scope="scope">
          <el-button type="Info" @click="editUserInfo(scope.row)">编辑</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页栏部分 -->
     <el-pagination
      @size-change="pageSizeChange"
      @current-change="currentPageChange"
      :current-page="currentPage"
      :page-sizes="[15,30,45,60,100]"
      :page-size="currentpagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userLength">
    </el-pagination>
  </el-card>
  <editUserInfoDialog
  :userInfoDialogVisible="userInfoDialogVisible"
  :userinfo="userinfo"
  @closeDialog="closeDialog">
  </editUserInfoDialog>
  </div>
</template>

<script>
// 导入子组件
import editUserInfoDialog from './components/editUserInfoDialog'
// 导入网络请求
import { getusers } from '../../network/userManage'
export default {
  name: 'usermanage',
  components: { editUserInfoDialog },
  data () {
    return {
      // 用户信息页面mask
      loadingMask: false,
      // 用户详细信息对话框展示
      userInfoDialogVisible: false,
      // 用于保存所有的用户数据
      // allUserInfo: [],
      // 用于保存单个用户信息
      userinfo: {},
      // 当前可以展示的用户数据
      currentUserInfo: [],
      // 分页数据
      // 每页可以展示的数据内容
      currentpagesize: 15,
      // 当前页面
      currentPage: 1,
      // 通过网络请求获取的所有用户数据数组长度
      userLength: 0
    }
  },
  methods: {
    // 获取所有用户数据
    getalluserinfo () {
      // 打开mask
      this.loadingMask = true
      // 请求当前页数据即userinfo 0-14的数据
      let tstar = this.currentpagesize * (this.currentPage - 1)
      let tend = this.currentpagesize * this.currentPage
      // this.$axios.get('http://localhost:3033/getalluser', {
      //   params: {
      //     star: tstar,
      //     end: tend
      //   }
      // })
      getusers(tstar, tend).then(res => {
        if (res.status === 200) {
          this.currentUserInfo = res.data.userData
          this.userLength = res.data.length
          // 关闭mask
          this.loadingMask = false
        }
      })
    },
    // 分页栏pagesize改变
    pageSizeChange (size) {
      console.log(size)
      this.currentpagesize = size
      this.getalluserinfo()
    },
    // currentpage改变的时候
    currentPageChange (num) {
      this.currentPage = num
      this.getalluserinfo()
    },
    // getCurrentUserInfo () {
    //   // 通过slice来获取showinfo中间的的数据
    //   let star = (this.currentPage - 1) * this.currentpagesize
    //   let end = this.currentPage * this.currentpagesize - 1
    //   console.log(star, end)
    //   this.currentUserInfo = this.allUserInfo.slice(star, end)
    // },
    // 打开对话框
    editUserInfo (row) {
      console.log(row)
      this.userinfo = row
      this.userInfoDialogVisible = true
    },
    // 关闭对话框
    closeDialog () {
      this.userInfoDialogVisible = false
      this.getalluserinfo()
    }
  },
  computed: {
    // 账户性别转换输出
    usersex (sex) {
      return function (sex) {
        if (sex === 'man') return '男'
        if (sex === 'female') return '女'
      }
    },
    // 账户状态转换输出
    userstatus (status) {
      return function (status) {
        if (status === true) return '可用'
        if (status === false) return '禁用'
      }
    },
    // 账户评论条数输出
    usercomments (comments) {
      return function (comments) {
        return `${comments.length}条`
      }
    }
  },
  created () {
    this.getalluserinfo()
  }
}
</script>

<style lang='stylus' scoped>

</style>
